<template>
	<view class="storyLine">
		<!-- <scroll-view class="chapterList" scroll-x="true">
			<view v-for="(item, index) in chapterList" :key="index" class="chapterCont">
				<text>{{item.name}}</text>
			</view>
		</scroll-view> -->
		<image :src="animationUrl" class="animationBg" v-if="isClick"></image>
		<scroll-view class="chapterList" scroll-x="true">
			<view v-for="(item, index) in chapterList" :key="index" class="chapterCont" @click="toChapterDetails(item)">
				<image :src="bgImg" class="bg" v-if="bgImg"></image>
				<text>{{ item.name }}</text>
				<view class="mask"></view>
				<image :src="item.url" class="headerImg"></image>
			</view>
		</scroll-view>
		<view class="goBack" @click="goBack">返回</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chapterList: [],
			isClick: false,
			animationUrl: null,
			bgImg: null
		}
	},
	methods: {
		getBgImg() {
			if (uni.getStorageSync('storyBackgroundImage')) {
				uni.request({
					url: this.configs.gameUrl + '/play/mFile/list',
					method: 'GET',
					header: {
						'X-Access-Token': this.configs.userToken // 在header中添加token
					},
					data: {
						resourceId: uni.getStorageSync('storyBackgroundImage'),
						userId: this.configs.userId
					},
					success: data => {
						this.bgImg = data.data.result.records[0].url
					},
					fail: (data, code) => { }
				});
			}
		},
		goBack() {
			uni.navigateBack()
		},
		toChapterDetails(item) {

			this.isClick = true
			this.animationUrl = item.url
			setTimeout(() => {
				this.isClick = false
				uni.navigateTo({
					url: '/pages/client/games/chapterDetails?id=' + item.id
				});
			}, 2000)
		},
		//章节列表
		getChapterList() {
			uni.request({
				url: this.configs.gameUrl + '/play/mChapter/queryList',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					userId: this.configs.userId
				},
				success: data => {
					this.chapterList = data.data.result
					// this.getAssets(data.data.result.records[1].img)
				},
				fail: (data, code) => { }
			});
		},
		getAssets(id) {
			uni.request({
				url: this.configs.gameUrl + '/play/mFile/queryById',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					resourceId: id,
					userId: this.configs.userId
				},
				success: data => { },
				fail: (data, code) => { }
			});
		}
	},
	onShow() {
		console.log(this.configs)
		this.getChapterList()
		this.getBgImg()
	}
}
</script>
<style scoped lang="less">
.storyLine {
	width: 100%;
	height: 100vh;
	background: linear-gradient(to bottom, #aaffff, #ffffff);
	position: relative;

	.hide {
		display: none;
	}

	.animationBg {
		position: absolute;
		width: 150rpx;
		height: 200rpx;
		left: 50%;
		top: 50%;
		margin-left: -75rpx;
		margin-top: -100rpx;
		z-index: 10;
		//放大、同时变淡动画，只执行一次
		animation: scale 2s linear 0s 1 forwards;
	}

	@keyframes scale {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(2);
			opacity: 0;
		}
	}

	.goBack {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 100rpx;
		height: 24rpx;
		//粉色背景
		background: #F8879C;
		border-radius: 12rpx;
		text-align: center;
		line-height: 24rpx;
		color: #fff;
		font-size: 14rpx;
	}

	.chapterList {
		white-space: nowrap;
		width: 100%;
	}

	.chapterCont {
		display: inline-block;
		width: 150rpx;
		height: 200rpx;
		margin-top: 50rpx;
		position: relative;
		margin-right: 20rpx;

		.mask {
			width: 100%;
			height: 100%;
			// background: linear-gradient(to bottom, #aaffff, #ffffff);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}

		.headerImg {
			width: 100%;
		}

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 3;
		}

		text {
			font-size: 12rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			text-align: center;
			z-index: 3;
			color: #fff;
		}
	}

}
</style>